<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎光临，约Fun</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .header {
            height: 48px;
            width: 100%;
            /*background-color: turquoise;*/
        }
        /*   导航栏背景色  */
        .ul-top {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        /*使左边部分在一行*/
        .li-top {
            float: left;
            border-right:1px solid #bbb;
        }
        /*导航栏文字*/
        .li-top a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*光标所指的导航栏链接变色*/
        .li-top a:hover:not(.active) {
            background-color: #111;
        }

        .main {
            height: 600px;
            width: 100%;
        }
        .main .header{
            height: 50px;
            width: 100%;
        }
        .main .container{
            height: 500px;
            width: 100%;
        }
        .main .container .img {
            height: 450px;
            width: 77%;
            margin-left: 21%;
            margin-top: 25px;
            background-image: url(image/img.png);
            background-repeat: no-repeat;
            background-size: 800px 1000px;
            background-repeat: round;
        }
        /*搜索框*/
                /*图标*/
            #logo{
                width: 55px;
                height: 45px;
                position: absolute;
                left: 320px;
                top: 50px;
                background: url("../images/主页/logo.png");
                /*background-position: 3px 0px;*/
                background-size: contain;
            }
        /*搜索栏*/
        .autocomplete {
            /*容器定位设置为 relative:*/
            position: relative;
            display: inline-block;
            position: absolute;
            left: 405px;
            top: 50px;
        }
        input {
            border: 1px solid transparent;
            background-color: #f1f1f1;
            padding: 12px;
            font-size: 16px;
        }
        input[type=text] {
            background-color: #f1f1f1;
            width: 100%;
        }
        /*提交栏*/
        input[type=submit] {
            position: absolute;
            top: 50px;
            left: 733px;
            background-color: DodgerBlue;
            color: #fff;
        }
        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            /*设置自动填充项宽度与容器相同*/
            top: 100%;
            left: 0;
            right: 0;
        }
        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
        }
        .autocomplete-items div:hover {
            /*鼠标移动到填充项设置的背景颜色*/
            background-color: #e9e9e9;
        }
        #page-all-nav{
            /*visibility: hidden;*/
            position: relative;
            left: 40px;
            top: 20px;
        }

        .slider-nav{
            position: absolute;
            width: 232px;
            height: 418px;
            border:1px solid #ff6700;
            background-color: #fff;
            top:30px;
            left:-50px;
            padding: 20px 0;
        }

        .slider-nav .slider-li{
            line-height: 40px;
        }

        .slider-nav .slider-li .name{
            font-size: 18px;
            width: 80px;
            height: 600px;
            right: 50px;
            text-decoration: none;


        }
        .slider-nav .slider-li .name span{
            margin-right: 5px;
        }
        .slider-nav .slider-li .You{
            font-size: 13px;
            float: right;
            position: center;
            line-height: inherit;
            /*text-decoration: none;*/
        }

        .slider-nav .slider-li:hover  {
            background-color: #ff6700;
            color:#fff;
        }
        .slider-nav .slider-li:hover .slider-pop{
            display: block;
            color:black;
        }


        .slider-nav .slider-li .name:hover{
            color:#fff;
        }
        .slider-nav .slider-pop{
            position: absolute;
            border:1px solid #e0e0e0;
            width: 973px;
            height: 458px;
            background-color: #fff;
            left:233px;
            top:-3px;
            box-shadow: 0 8px 16px rgba(0 ,0, 0, 0.18);
            display: none;
        }

        .slider-nav .pop-li{
            float: left;
            width: 223px;
            overflow: hidden;
            height: 120px;
            padding-left:  24px;
            padding-top:20px;
            margin-bottom: 10px;
            text-decoration: none;
        }

        .slider-nav .pop-li img{
            width: 110px;
            height: 110px;
            float: left;
            margin-right: 16px;
        }
    </style>
</head>
<body  background="../images/菜单/餐厅图/5.jpeg">
<div class="header">
    <ul class="ul-top">
        <li class="li-top"><a  >欢迎光临，约Fun!</a></li>
        <li class="li-top"><a  href="1主页.html">首页</a></li>
        <li class="li-top" style="float:right"><a href="3登录.html">登录</a></li>
        <li class="li-top" style="float:right"><a href="#about">收藏</a></li><li class="li-top" style="float:right">
        <a href="5我的Fun桌.html">我的Fun桌</a></li>
    </ul>
</div>
<div class="main">
    <div class="header">
        <!--logo-->
        <div id="logo"></div>
        <!--    搜索框-->
        <div id="search">
            <!-- autocomplete="off" 确保表单已关闭自动填充功能： -->
            <form autocomplete="off" action="/index.php">
                <div class="autocomplete" style="width:300px;">
                    <input id="myInput" type="text" name="s" placeholder="今天想吃什么">
                </div>
                <input type="submit">
            </form>
            <script>
                var sites = ["西红柿炒鸡蛋","青椒肉丝","糖醋排骨","Wiki","Zhihu","Baidu","Sina","Tmall","JD","Alibaba","QQ","Weixin","R","Rust","Python","Ruby"];

                function autocomplete(inp, arr) {
                    /*自动填充函数有两个参数，input 输入框元素和自动填充的数组*/
                    var currentFocus;
                    /* 监听 input 输入框，当在 input 输入框元素中时执行以下函数*/
                    inp.addEventListener("input", function(e) {
                        var a, b, i, val = this.value;
                        /*关闭已打开的自动填充列表*/
                        closeAllLists();
                        if (!val) { return false;}
                        currentFocus = -1;
                        /*创建 DIV 元素用于放置自动填充列表的值*/
                        a = document.createElement("DIV");
                        a.setAttribute("id", this.id + "autocomplete-list");
                        a.setAttribute("class", "autocomplete-items");
                        /*DIV 作为自动填充容器的子元素*/
                        this.parentNode.appendChild(a);
                        /*循环数组*/
                        for (i = 0; i < arr.length; i++) {
                            /*检查填充项是否有与文本字段值相同的内容，不区分大小写*/
                            if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
                                /*为每个匹配元素创建一个 DIV 元素 */
                                b = document.createElement("DIV");
                                /*匹配项加粗*/
                                b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
                                b.innerHTML += arr[i].substr(val.length);
                                /*选中的填充项插入到隐藏 input 输入字段，用于保存当前选中值*/
                                b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
                                /*当有人点击填充项（DIV 元素）时执行函数*/
                                b.addEventListener("click", function(e) {
                                    /*选中的填充项插入到隐藏 input 搜索字段*/
                                    inp.value = this.getElementsByTagName("input")[0].value;
                                    /*关闭自动填充列表*/
                                    closeAllLists();
                                });
                                a.appendChild(b);
                            }
                        }
                    });
                    /*按下键盘上的一个键时执行函数*/
                    inp.addEventListener("keydown", function(e) {
                        var x = document.getElementById(this.id + "autocomplete-list");
                        if (x) x = x.getElementsByTagName("div");
                        if (e.keyCode == 40) {
                            /*如果按下箭头向下键，currentFocus 变量加 1，即向下移动一位*/
                            currentFocus++;
                            /*使当前选中项更醒目*/
                            addActive(x);
                        } else if (e.keyCode == 38) { //up
                            /*按下箭头向上键，选中列表项向上移动一位*/
                            currentFocus--;
                            /*使当前选中项更醒目*/
                            addActive(x);
                        } else if (e.keyCode == 13) {
                            /*如果按下 ENTER 键，阻止提交，你也可以设置 submit 提交*/
                            e.preventDefault();
                            if (currentFocus > -1) {
                                /*模拟点击选中项*/
                                if (x) x[currentFocus].click();
                            }
                        }
                    });
                    function addActive(x) {
                        /*设置选中的选项函数*/
                        if (!x) return false;
                        /*移动选项设置不同选中选项的背景颜色*/
                        removeActive(x);
                        if (currentFocus >= x.length) currentFocus = 0;
                        if (currentFocus < 0) currentFocus = (x.length - 1);
                        /*添加 "autocomplete-active" 类*/
                        x[currentFocus].classList.add("autocomplete-active");
                    }
                    function removeActive(x) {
                        /*移除没有选中选项的 "autocomplete-active" 类*/
                        for (var i = 0; i < x.length; i++) {
                            x[i].classList.remove("autocomplete-active");
                        }
                    }
                    function closeAllLists(elmnt) {
                        /*关闭自动添加列表*/
                        var x = document.getElementsByClassName("autocomplete-items");
                        for (var i = 0; i < x.length; i++) {
                            if (elmnt != x[i] && elmnt != inp) {
                                x[i].parentNode.removeChild(x[i]);
                            }
                        }
                    }
                    /*点击 HTML 文档任意位置关闭填充列表*/
                    document.addEventListener("click", function (e) {
                        closeAllLists(e.target);
                    });
                }

                autocomplete(document.getElementById("myInput"), sites);
            </script>
        </div>
    </div>
    <div class="container">
        <a href="" class="logo"></a>
        <ul class="nav">
            <li class="nav-item" id="page-all-nav">
                <a href="" id="allcat" style="font-size:20px;text-decoration: none" >全部商品分类</a>
                <!-- 全部分类下拉菜单-->
                <div class="slider-nav">
                    <ul>
                        <li class="slider-li">
                            <a href="" class="name">
                                <span>菜品分类1</span>
                                <span>荤菜</span>
                                <span class="You">></span>
                            </a>
                            <div class="slider-pop">
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/可乐鸡翅.jpg">
                                    <p>可乐鸡翅</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/回锅肉.jpg">
                                    <p>回锅肉</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/焖大肠.jpg">
                                    <p>焖大肠</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/糯猪脚.jpg">
                                    <p>糯猪脚</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/肉沫豆腐.jpg">
                                    <p>肉沫豆腐</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/蒜薹炒腊肉.jpg">
                                    <p>蒜薹炒腊肉</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/茄汁大虾.jpg">
                                    <p>香煎黑椒鸡胸肉</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/酱爆花甲.jpg">
                                    <p>酱爆花甲</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/荤菜/鸡公煲.jpg">
                                    <p>鸡公煲</p>
                                </a>
                            </div>
                        </li>
                        <li class="slider-li">
                            <a href="" class="name">
                                <span>菜品分类2</span>
                                <span>主食小吃</span>
                                <span class="You">></span>
                            </a>
                            <div class="slider-pop">
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/煲仔饭.jpg">
                                    <p>煲仔饭</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/黑椒土豆泥.jpg">
                                    <p>黑椒土豆泥</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/螺蛳粉.jpg">
                                    <p>螺蛳粉</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/荷包蛋焖面.jpg">
                                    <p>荷包蛋焖面</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/馄饨.jpg">
                                    <p>馄饨</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/肠粉.jpg">
                                    <p>肠粉</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/炒饭.jpg">
                                    <p>炒饭</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/青菜香菇粥.jpg">
                                    <p>青菜香菇粥</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/主食小吃/丝娃娃.jpg">
                                    <p>丝娃娃</p>
                                </a>
                            </div>
                        </li>
                        <li class="slider-li">
                            <a href="" class="name">
                                <span>菜品分类3</span>
                                <span>甜点</span>
                                <span class="You">></span>
                            </a>
                            <div class="slider-pop">
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/杨枝甘露冰汤圆.jpg">
                                    <p>杨枝甘露冰汤圆</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/雪媚娘.jpg">
                                    <p>雪媚娘</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/玫瑰啵啵牛乳.jpg">
                                    <p>玫瑰啵啵牛乳</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/水晶蜜桃冻挞.jpg">
                                    <p>水晶蜜桃冻挞</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/山药一点红.jpg">
                                    <p>山药一点红</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/蜜桃乌龙千层蛋糕.jpg">
                                    <p>蜜桃乌龙千层蛋糕</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/红枣桂花糯米糕.jpg">
                                    <p>红枣桂花糯米糕</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/烧麦.jpg">
                                    <p>烧麦</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/甜点/一口酥蛋挞.jpg">
                                    <p>一口酥蛋挞</p>
                                </a>
                            </div>
                        </li>
                        <li class="slider-li">
                            <a href="" class="name">
                                <span>菜品分类4</span>
                                <span>饮料</span>
                                <span class="You">></span>
                            </a>
                            <div class="slider-pop">
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/樱桃荔枝气泡水.jpg">
                                    <p>樱桃荔枝气泡水</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/云朵生椰.jpg">
                                    <p>云朵生椰</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/桂花酒酿拿铁.jpg">
                                    <p>桂花酒酿拿铁</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/抹茶驭手拿铁.jpg">
                                    <p>抹茶驭手拿铁</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/葡萄酸奶绵绵冰.jpg">
                                    <p>葡萄酸奶绵绵冰</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/果酒.jpg">
                                    <p>果酒</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/雪顶葡萄乌龙.jpg">
                                    <p>雪顶葡萄乌龙</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/蜂蜜百香果茶.jpg">
                                    <p>蜂蜜百香果茶</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/饮品/椰奶冰沙.jpg">
                                    <p>椰奶冰沙</p>
                                </a>
                            </div>
                        </li>
                        <li class="slider-li">
                            <a href="" class="name">
                                <span>菜品分类5</span>
                                <span>汤羹</span>
                                <span class="You">></span>
                            </a>
                            <div class="slider-pop">
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/土豆肥牛汤.jpg">
                                    <p>土豆肥牛汤</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/豆腐鲜虾菇菌汤.jpg">
                                    <p>豆腐鲜虾菇菌汤</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/玉米炖排骨.jpg">
                                    <p>玉米炖排骨</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/三鲜汤.jpg">
                                    <p>三鲜汤</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/银耳南瓜羹.jpg">
                                    <p>银耳南瓜羹</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/牛奶桃胶羹.jpg">
                                    <p>牛奶桃胶羹</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/马蹄莲银耳羹.jpg">
                                    <p>马蹄莲银耳羹</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/银耳百合莲子羹.jpg">
                                    <p>银耳百合莲子羹</p>
                                </a>
                                <a href="" class="pop-li">
                                    <img src="../images/菜单/汤羹/玫瑰燕窝.jpg">
                                    <p>玫瑰燕窝</p>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <div class="img"></div>
    </div>
</div>
</body>
</html>